<template>
    <div>
        <div v-if="currentPanel == 'list'">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>群聊质检</span>
                </div>
                <el-row>
                    <el-col :span="22">
                        <el-input v-model="queryData" placeholder="请输入要搜索的名称"></el-input>&nbsp;&nbsp;
                        <el-button type="primary" @click="queryDataHandle(pagePagination.currentPage, pagePagination.pageSize)">查询</el-button>
<!--                        <el-divider direction="vertical"></el-divider>-->
                        <el-button type="primary" @click="resetQuery">重置</el-button>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="primary" @click="currentHandle({'currentPanel':'add'})">+创建规则</el-button>
                    </el-col>
                </el-row>

                <div class="interspaceH"></div>

                <el-table :data="dataSource" :header-cell-style="{background:'#F3F4F7',color:'#555'}"
                          style="width: 100%" :row-class-name="rowClassName">
                    <el-table-column prop="rulesName" label="规则名称"></el-table-column>
                    <el-table-column prop="underScrutinyEn" label="适用群聊">
                        <template slot-scope="scope">
                            <div style="overflow: hidden;height: 20px" :id="scope.row.id">
                              <span v-for="(u,i) in scope.row.underScrutinyEn">
                                &nbsp;&nbsp;&nbsp;{{u.clientGroupName}}<br/>
                              </span>
                            </div>
                            <div>
                                <el-button type="text" style="margin-left:10px" id="closeSearchBtn" @click="closeSearch(scope.row.id)">
                                    {{ showAll[scope.row.id-1].word }}
                                    <i :class=" showAll[scope.row.id-1].isTrue  ? 'el-icon-arrow-up ': 'el-icon-arrow-down'"></i>
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="开关">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.status" active-color="#13ce66" @change="updateSwitch(scope.row)"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="founderName" label="创建人"></el-table-column>
                    <el-table-column prop="createTime" label="创建时间"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button @click="updateHandle(scope.row)" type="text" size="small">编辑</el-button>
                            <el-divider direction="vertical"></el-divider>
                            <el-button @click="deleteHandle(scope.row)" type="text" size="small">删除</el-button>
                            <el-divider direction="vertical"></el-divider>
                            <el-button @click="detailHandle(scope.row)" type="text" size="small">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="interspaceH"></div>

                <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                               @current-change="queryDataHandle($event,pagePagination.pageSize)"
                               :current-page="pagePagination.currentPage"
                               :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                               layout="total, sizes, prev, pager, next"
                               :total="dataSource.length">
                </el-pagination>
            </el-card>
        </div>

        <div v-if="currentPanel == 'add'">
            <CreateCen @currentHandle="addSubmit"/>
        </div>

        <div v-if="currentPanel == 'edit'">
            <UpdateCen :rulesId="single.rulesId" @currentHandle="edit"/>
        </div>

        <div v-if="currentPanel == 'view'">
            <ViewCen :ruleData="single" @currentHandle="currentHandle"/>
        </div>
    </div>
</template>

<script>
    import CreateCen from "@/views/riskControl/group_inspection/add"
    import UpdateCen from "@/views/riskControl/group_inspection/edit"
    import ViewCen from "@/views/riskControl/group_inspection/view"

    export default {
        components: {
            CreateCen,
            UpdateCen,
            ViewCen
        },
        data() {
            return {
                type: 'group_inspection',
                currentPanel: 'list',
                queryData: '',
                dataSource: [],
                //分页后列表数据
                pagePagination: {
                    currentPage: 1,
                    pageSizes: [10, 15, 20, 25],
                    pageSize: 10,
                    total: 0
                },
                showAll: [//使用成员列中按钮测试数据，查询出一条数据对应这里一组数据
                    // {
                    //   isTrue: false,//是否全部展示
                    //   word: '展开'//按钮  展开或收起
                    // }
                ],
                single: {},
            }
        },
        mounted() {
            //初始化执行查询方法
            this.queryDataHandle(1, 10)
        },
        methods: {
            queryDataHandle(page = 1, row = 10) {
                let that = this;
                let payload = {
                    rulesName: that.queryData,
                    rulesType: that.type,
                    pageNum: page,
                    pageSize: row
                }
                that.$request("/api/groupInspection/getByTitle/1_0", payload, "POST").then((data) => {
                    that.dataSource = data.rows
                    that.pagePagination['total'] = data.total
                    that.pagePagination['pageSize'] = row
                    that.initShowAll()
                })
            },
            resetQuery() {
                this.queryData = ''
                this.$message({
                    message: '重置成功',
                    type: 'success'
                });
            },
            currentHandle(e) {
                this.currentPanel = e.currentPanel;
                this.initShowAll()//刷新适用群列按钮
            },
            deleteHandle(row) {
                let that = this
                this.$confirm('是否确认删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    that.$request("/api/groupInspection/delete/1_0?id=" + row.rulesId, '', "POST").then((data) => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        that.queryDataHandle(that.pagePagination.currentPage, that.pagePagination.pageSize)
                    })
                }).catch(() => {
                });
            },
            //详情页面
            detailHandle(row) {
                this.single = row;
                this.currentPanel = 'view';
            },
            //修改页面
            updateHandle(row) {
                this.single = row;
                this.currentPanel = 'edit';
            },
            rowClassName({row, rowIndex}) {
                //把每一行的索引放进row.id
                row.id = rowIndex + 1;
            },
            //创建规则保存
            addSubmit(e, type) {
                if (type == 'back') {//点击返回直接跳转
                    this.currentHandle(e)
                }
                if (e.data != null && e.data != undefined) {
                    let that = this;
                    e.data['rulesType'] = that.type
                    that.$request("/api/groupInspection/add/1_0", e.data, "POST").then((data) => {
                        //如果数据保存成功，跳转
                        that.currentHandle(e)
                        that.queryDataHandle(that.pagePagination.currentPage, that.pagePagination.pageSize)
                    })
                }
            },
            //修改规则
            edit(e, type) {
                if (type == 'back') {//点击返回直接跳转
                    this.currentHandle(e)
                }
                if (e.data != null && e.data != undefined) {
                    let that = this;
                    e.data['rulesType'] = that.type
                    that.$request("/api/groupInspection/update/1_0", e.data, "POST").then((data) => {
                        //如果数据保存成功，跳转
                        that.currentHandle(e)
                        that.queryDataHandle(that.pagePagination.currentPage, that.pagePagination.pageSize)
                    })
                }
            },
            updateSwitch(row){
                let that = this;
                that.$request("/api/groupInspection/update/1_0", row, "POST").then((data) => {
                    that.queryDataHandle(that.pagePagination.currentPage, that.pagePagination.pageSize)
                })
            },

            closeSearch(id) {
                var showAll = this.showAll[id - 1].isTrue
                var searchBoxHeght = document.getElementById(id);
                if (showAll == true) {
                    searchBoxHeght.style.height = 20 + "px";
                    this.showAll[id - 1].word = '展开';
                    this.showAll[id - 1].isTrue = false;
                } else {
                    searchBoxHeght.style.height = "auto";
                    this.showAll[id - 1].word = '收起';
                    this.showAll[id - 1].isTrue = true;
                }
            },
            initShowAll() {
                if (this.dataSource != null && this.dataSource != undefined && this.dataSource.length > 0) {
                    for (var i = 0; i < this.dataSource.length; i++) {
                        this.showAll.push({
                            isTrue: false,
                            word: '展开'
                        })
                    }
                }
            },
        }
    }
</script>

<style scoped>
    .box-card .el-input {
        width: 200px;
    }

    .box-card .el-select {
        width: 200px;
    }

    a {
        color: #298bef;
    }

    /*#member {*/
    /*  overflow: hidden;*/
    /*}*/
</style>
